<template>
    <div>
        <Nav/>
        <div class="header">
            <div class="container">
                <form class="main-form">
                    <h1>用户登录</h1>
                    <div class="error-text">
                        用户名或密码错误
                    </div>
                    <div>
                        <input type="text" placeholder="用户名">
                    </div>
                    <div>
                        <input type="text" placeholder="密码">
                    </div>
                    <div>
                        <button class="btn btn-primary" type="submit">登录</button>
                    </div>
                    <div class="zhuce">
                        没有账号？<a href="">免费注册</a>
                    </div>
                </form>
            </div>
        </div>

        <Footer/>
    </div>
</template>

<script>
import Nav from '../components/Nav.vue'
import Footer from '../components/Footer'

export default {
    components:{
        Nav,
        Footer
    }
}
</script>

<style scoped>
    .header{
        background-color: #e93854;
        height: 475px;
    }
    .container{
        background-image: url(https://img11.360buyimg.com/da/jfs/t16363/164/2298198848/33213/870500f1/5aa68632Nd7790d0c.png);
        background-repeat: no-repeat;
        background-size: cover;
        height: 475px;
        position: relative;
    }
    form{
        background-color: white;
        padding: 20px;
        right: 0;
        top: 60px;
        position: absolute;
        box-shadow: -3px 3px 1px rgba(0,0,0,.1);
    }

    input,button{
        width: 300px;
        padding: 10px;
        margin: 10px;
    }

    h1{
        font-size: 1.3rem;
        text-align: center;
        font-weight: normal;
    }

    .zhuce,a{
        font-size: 13px;
        /* margin-left: 10px; */
        padding: 10px;
        color: #888;
    }
    
    a{
        text-decoration: none;
    }

</style>
